<template>
  <main class="app-container">
    <section class="statistical-graph flex">
      <div class="left-table flex flex-dir-c flex-js-b flex-1">
        <table-component :config-data="SHARE.headerConfig" :list-data="SHARE.STAT_DAY_DATA">
          <template v-slot:title>
            <span>今天</span>
          </template>
        </table-component>
        <table-component :config-data="SHARE.headerConfig" :list-data="SHARE.STAT_SUM_DATA">
          <template v-slot:title>
            <span>总体</span>
          </template>
        </table-component>
      </div>
      <div class="right-chart flex-1">
        <span class="title">近7天数据变化</span>
        <mix-chart
            class-name="chart"
            height="262px"
            width="100%"
            :join-number="SHARE.STAT_CHART_DATA.value"
            :charts-day="SHARE.STAT_CHART_DATA.day">
        </mix-chart>
      </div>
    </section>
    <section class="mrg-top flex">
      <table-component :config-data="SHARE.shareConfig" :list-data="SHARE.CONFIG_DATA">
        <template v-slot:title v-if="!SHARE.CONFIG_DATA">
          <el-button
              type="primary"
              @click.prevent="openTemp">
            添加数据
          </el-button>
        </template>
        <template v-slot:button>
          <el-button
              size="mini"
              type="primary"
              @click.prevent="openTemp('update')">编辑
          </el-button>
        </template>
      </table-component>
    </section>
    <section>
      <table-component :config-data="changeTable" :height="263" :list-data="SHARE.SHARE_LIST.data">
        <template v-slot:title>
          <el-button
              size="medium"
              @click="changeButton(1)"
              :type="buttonIndex === 1 ? 'primary' : ''">
            分享用户
          </el-button>
          <el-button
              size="medium"
              @click="changeButton(2)"
              :type="buttonIndex === 2 ? 'primary' : ''">
            加入用户
          </el-button>
        </template>
      </table-component>
      <div class="mrg-top mrg-bottom flex flex-js-c">
        <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="SHARE.SHARE_LIST.total">
        </el-pagination>
      </div>
    </section>
    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        @close="resetTemp"
        center
        :width="isMatch ? '480px' : '420px'"
    >
      <el-form :model="SHARE.temp" ref="form" :label-width="isMatch ? '200px' : '160px'" >
        <template v-if="isMatch">
          <el-form-item label="邀新税率(%):">
            <el-input class="el-input-custom" v-model="SHARE.temp.tax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邀新的门槛(获利):">
            <el-input class="el-input-custom" v-model="SHARE.temp.score" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邀新时分享玩家获得的份额:">
            <el-input class="el-input-custom" v-model="SHARE.temp.reward" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="应邀时应邀玩家获得的份额:">
            <el-input class="el-input-custom" v-model="SHARE.temp.invited_reward" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="应邀玩家的数量:">
            <el-input class="el-input-custom" v-model="SHARE.temp.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="限制时间(天):">
            <el-input class="el-input-custom" v-model="SHARE.temp.reward_expired" autocomplete="off"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="分享天数:">
            <el-input class="el-input-custom" v-model="SHARE.temp.day" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="需要分享的人数:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分享人获得重抽券数量:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.reward" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="应邀人获得重抽券数量:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.invited_reward" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="重抽券存在时间:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.redraw_expired" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="每天分享次数:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.limit" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="奖励存在时间:">
            <el-input  class="el-input-custom" v-model="SHARE.temp.reward_expired" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动开始时间:" v-if="!isDisabled">
            <el-date-picker
                class="el-input-custom"
                v-model="SHARE.temp.start"
                type="datetime"
                align="center"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动结束时间:" v-if="!isDisabled">
            <el-date-picker
                class="el-input-custom"
                v-model="SHARE.temp.ended"
                type="datetime"
                align="center"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="uploadData">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </main>
</template>
<script setup>
import invite from '@/common/SDK/Invite/inviteShare';
import matchShare from '@/common/SDK/match/matchShare.js';
import tableComponent from '@/components/common/ele-table.vue';
import mixChart from '@/components/Charts/MixChart.vue';
export default {
  name: 'Share',
  components: {
    tableComponent,
    mixChart
  },
  props:['isMatch'],
  data() {
    return {
      SHARE: null,//模块
      buttonIndex: 1, //控制分享和加入按钮
      dialogVisible: false,
      isDisabled: false,
      //分页参数
      listQuery: {
        page: 1,
        per_page: 5
      }
    }
  },
  computed: {
    changeTable(){
      let config;
      if(this.buttonIndex === 1) {
        config = this.SHARE.shareUser;
        this.SHARE.getUserShareData(this.listQuery);
      } else {
        config = this.SHARE.joinUser;
        this.SHARE.getJoinUserData(this.listQuery);
      }
      return config
    }
  },
  created() {
    if(this.isMatch){
      this.SHARE = matchShare;
    } else {
      this.SHARE = invite;
    }
  },
  mounted() {
    this.SHARE.init();
  },
  methods: {
    /**
     * 按钮下标
     * @param { number } index
     */
    changeButton(index){
      this.buttonIndex = index;
    },

    /**
     * 打开模板
     */
    openTemp(type){
      type === 'update' ? this.setTemp() : '';
      this.dialogVisible =!this.dialogVisible;
    },

    /**
     * 重置模板数据
     */
    resetTemp(){
      this.SHARE.resetTemp();
    },

    /**
     * 设置模板数据
     */
    setTemp(){
      const keys = Object.keys(this.SHARE.temp);
      this.isDisabled = true;
      let data = this.SHARE.CONFIG_DATA[0];
      let list = [];
      keys.forEach((item)=>{
        list.push({ key: item,value: data[item] })
      })
      list.forEach((item)=>{
        this.SHARE.temp[item.key] = item.value;
      })
    },

    /*上传分享配置数据*/
    uploadData(){
      this.SHARE.uploadConfigData(this.SHARE.temp)
          .then(res=>{
            this.resetTemp();
            this.openTemp();
            this.SHARE.getConfigData();
          })
    },
    /*页码改变*/
    handleCurrentChange(num){
      this.listQuery.page = num;
    },
  }
}
</script>
<style scoped lang="scss">
.app-container {
  /*顶部*/
  .statistical-graph {
    height: 300px;
    .right-chart {
      .title {
        display: block;
        text-align: center;
        margin: 10px 0;
      }
    }
  }
  .el-input-custom {
    width: 200px;
  }
}
</style>
